{% load static %}
<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>插件中心</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="{% static 'plugins/css/style.css' %}">
</head>
<body>
<div id="app" v-cloak>
    <el-breadcrumb separator-class="el-icon-arrow-right breadcrumb">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>插件中心</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="categorys" v-loading="loading">
        <el-button-group>

            <el-button size="small" v-for="item in category" :class="{active:item.active}" @click="selectCategory(item)"
                       v-text="item.name" :key="item.id"></el-button>
        </el-button-group>
    </div>

    <el-card class="box-card">
        <div class="toolbar">
            <el-button type="primary" size="small" circle icon="el-icon-refresh"></el-button>

{#            <el-button-group>#}
{#                <el-button size="small" type="success" icon="el-icon-tickets">全部</el-button>#}
{#                <el-button size="small" type="success" icon="el-icon-shopping-cart-2">免费</el-button>#}
{#                <el-button size="small" type="success" icon="el-icon-coin">付费</el-button>#}
{#            </el-button-group>#}
            <el-button type="danger" size="small" icon="el-icon-user">用户信息</el-button>

            <el-input
                    size="small"
                    placeholder="请输入内容"
                    prefix-icon="el-icon-search"
                    v-model="searchInput"
                    class="search-input"
            ></el-input>
        </div>
        <div class="table">

            <installed v-if="local" :data="_config.installed"></installed>
            <store v-else :table-data="tableData"></store>

        </div>
    </el-card>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript">
    const _config = {
        installed:{{ apps|safe }},
        baseUrl:'{% url 'plugins:index' %}'
    }
</script>
<script type="text/javascript" src="{% static 'plugins/js/axios.min.js' %}"></script>
<script type="text/javascript" src="{% static 'plugins/js/installed.js' %}"></script>
<script type="text/javascript" src="{% static 'plugins/js/store.js' %}"></script>
<script type="text/javascript" src="{% static 'plugins/js/plugins.js' %}"></script>
</body>
</html>